
{% include 'haoAdmin/head.html' %}

<body>
	<div class="admin-main">

		<blockquote class="layui-elem-quote">
            <div class="layui-input-inline" style="width: 400px;">
			  	<input type="text" id="keyword" class="layui-input" style="width: 80%; float: left;" placeholder="登录名/真实名/手机号">
				<button class="layui-btn" style="float: right;" id="search">搜索</button>
			</div>
		</blockquote>

		<fieldset class="layui-elem-field" style="width: 45%; float: left">
			<legend>用户列表</legend>
            <a href="javascript:;" class="layui-btn layui-btn-small" id="add" style="margin-left: 15px;">
				<i class="layui-icon">&#xe608;</i> 添加用户
			</a>

			<div class="layui-field-box" style="overflow-x: auto;">
				<table class="site-table table-hover">
					<thead>
						<tr>
							<th>登录名</th>
							<th>真实名</th>
							<th>手机号</th>
							<th>性别</th>
							<th>创建日期</th>
							<th>操作</th>
						</tr>
					</thead>

					<tbody id="tbodys">

					</tbody>

					<script type="text/html" id="user_tpl">
						{% raw %}
							{{# layui.each(d.users, function(index, item){ }}
								<tr>
                                    <td>{{ item.login_name }}</td>
									<td>{{ item.user_name }}</td>
									<td>{{ item.phone }}</td>
									<td>{{ item.sex }}</td>
									<td>{{ item.create_time }}</td>
									<td>
										<a href="javascript:;" class="layui-btn layui-btn-mini">编辑</a>
										<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
                                        <a href="javascript:;" v="{{ item.pid }}"
                                           class="layui-btn layui-btn-normal layui-btn-mini getUserOrg">机构</a>
                                        <a href="javascript:;" v="{{ item.pid }}"
                                           class="layui-btn layui-btn-normal layui-btn-mini getUserrole">角色</a>
									</td>
								</tr>
							{{# }) }}
						{% endraw %}
					</script>
				</table>
			</div>
		</fieldset>

        <fieldset class="layui-elem-field" style="width: 50%; float: right">
            <legend><span id="parentMenuName"></span>子菜单列表</legend>
            <a href="javascript:;" class="layui-btn layui-btn-small" id="add" style="margin-left: 15px;">
				<i class="layui-icon">&#xe608;</i> 添加子菜单
			</a>

			<div class="layui-field-box" style="overflow-x: auto;">
				<table class="site-table table-hover">
					<thead>
						<tr>
							<th>菜单名称</th>
							<th>菜单URL</th>
							<th>归属机构</th>
							<th>归属角色</th>
							<th>操作</th>
						</tr>
					</thead>

					<tbody id="tbodys2">

					</tbody>

					<script type="text/html" id="menu_tpl2">
						{% raw %}
							{{# layui.each(d.menus, function(index, item){ }}
								<tr>
                                    {{# if(item.parent_name != ""){ }}
                                        <td>{{ item.menu_name }}</td>
                                    {{# } else { }}
                                        <td style="font-weight: bold">{{ item.menu_name }}</td>
                                    {{# } }}
                                    <td>{{ item.menu_url }}</td>
									<td>{{ item.org_name }}</td>
									<td>{{ item.role_name }}</td>
									<td>
										<a href="javascript:;" class="layui-btn layui-btn-mini">编辑</a>
										<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
									</td>
								</tr>
							{{# }) }}
						{% endraw %}
					</script>
				</table>
			</div>
		</fieldset>

		<div class="admin-table-page">
			<div id="page" class="page">
			</div>
		</div>
	</div>


	<script>
        var _keyword = "";
        var laypage, laytpl;
        layui.use(['laytpl', 'laypage'], function() {
            laypage = layui.laypage,
            laytpl = layui.laytpl;

            $(function(){
                init_data(1);
            });
        });

        function init_data(page, keyword){
            ajaxReq("user/get_users", function(data){
                var tpl = document.getElementById('user_tpl').innerHTML; //读取模版
                laytpl(tpl).render(data, function(render){
                  document.getElementById('tbodys').innerHTML = render;
                });

                _search();

                //getUserOrg();
                //getUserRole();

                buildPage(laypage, data.page_no, data.total_page, function (page_no) {
                    init_data(page_no, keyword);
                });
            }, {page_no: page, keyword: keyword});
        }

        function getUserOrg() {
            $(".getUserOrg").click(function () {
                var user_id = $(this).attr("v");
                var menuName = $(this).parent("td").siblings("td").eq(0).html();
                $("#parentMenuName").html("［" + menuName + "］");

                ajaxReq("menu/get_parent_menu", function(data){
                    var tpl = document.getElementById('menu_tpl2').innerHTML; //读取模版
                    //方式一：异步渲染（推荐）
                    laytpl(tpl).render(data, function(render){
                      document.getElementById('tbodys2').innerHTML = render;
                    });
                }, {menu_id: menu_id, is_children: "1"});
            })
        }

        function _search(){
            $("#search").click(function () {
                var keyword = $("#keyword").val();
                _keyword = keyword;
                init_data(1, keyword);
            });
        }
	</script>
</body>
